<template>
	<view>
		<view v-if="list.length">
			<view class="midBox" >
				<view class="topTitle">
					<view>单选题</view>
					<view class="box"  v-for="item in danList" :key='item.index'>
						<view 
							@click="jump(item.index)"
							:class="item.answer_sort?'item active':'item'"
							:style="item.showBorder?'border:4rpx solid #4d89fe':''"
						>
						{{item.index+1}}
						</view>
					</view>
				</view>
				
				<view class="topTitle">
					<view>判断题</view>
					<view class="box" v-for="item in panList" :key='item.index'>
						<view 
							@click="jump(item.index)"
							:class="item.answer_sort?'item active':'item'"
							:style="item.showBorder?'border:4rpx solid #4d89fe':''"
						>
						{{item.index+1}}
						</view>
					</view>
				</view>
				<view class="topTitle">
					<view>多选题</view>
					<view class="box" v-for="item in duoList" :key='item.index'>
						<view 
							@click="jump(item.index)"
							:class="item.answer_sort?'item active':'item'"
							:style="item.showBorder?'border:4rpx solid #4d89fe':''"
						>
						{{item.index+1}}
						</view>
					</view>
				</view>
			</view>
			<view  @click="handlePaper" class="button">提交并查看结果</view>
		</view>
	</view>
</template>

<script>
	import request from "@/pagesB/common/js/request/allRequest.js"
	import { routerParamUrl } from '@/common/js/public/utils.js';
	export default {
		data() {
			return { 
					list:[],
					danList:[],
					panList:[],
					duoList:[],
					paper_id:'',
					number:undefined
				}
		},
		onLoad(option){
			this.number=option.number
			this.paper_id=option.paper_id
			let sentry_pid
			sentry_pid = uni.getStorageSync('sentryPid')
				request.getQuestionList({
					data:{paper_id:this.paper_id},
					success:(res)=>{
						res[this.number].showBorder=true
						this.list=res.map((item,index)=>{
							return { ...item, index:index }
						})
						this.danList=this.list.filter(item=>item.type==1)
						this.panList=this.list.filter(item=>item.type==2)
						this.duoList=this.list.filter(item=>item.type==3)
					},
					fail:(err)=>{ }
				})
		},
		methods: {
			handPaperFuc(){
				request.handPaper({
					data:{paper_id:this.paper_id},
					success:(res)=>{
						wx.navigateTo({
							url:`/pagesB/pages/newTestResult/index?${routerParamUrl(res)}`,
						})
					},
					fail:(err)=>{
						console.log(err);
					}
				})	
			},
			handlePaper(){
				let length=this.list.filter(item=>!item.answer_sort).length
				if(length){
					uni.showModal({
						title:'提示',
						content:`你有${length}道题未答,会影响你的结果和成绩,是否直接交卷`,
						cancelText:'直接交卷',
						confirmText:'返回作答',
						cancelColor:'#576B95',
						confirmColor:'#000000',
						success:({confirm})=>{
							if(!confirm){
								this.handPaperFuc()
							}
						}
					})
				}else{
					this.handPaperFuc()
				}
			},
			
			jump(item){
				uni.$emit("index",item)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
.button{
	width: 50%;
	height: 80rpx;
	background-color: #2979ff;
	margin: auto;
	text-align: center;
	line-height: 80rpx;
	border-radius: 50rpx;
	color: white;
	margin-top: 40rpx;
}
.button:active{
	background-color: #1890ff;
}
.topTitle{
	margin-top: 40rpx;
}
.midBox{
	box-sizing: border-box;
	padding-left: 10rpx;
}
.box{
	box-sizing: border-box;
	display: inline-block;
}
.item{
	display: inline-block;
	height: 70rpx;
	width: 70rpx;
	line-height: 70rpx;
	text-align: center;
	border-radius: 50%;
	background-color: #ebebeb;
	margin: 20rpx 0 0 46rpx;
}
.active{
	background-color: #83acfb;
}
</style>
